<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>模板语法</h2>
      <h3>文本插值</h3>
      <!-- 使用双大括号可以将data的数据渲染在页面上 -->
      <!-- 除了null和undefined，其他都是转成字符串显示 -->
      <!-- 
        数据类型 
          7种基本类型: string,number,boolean,null,undefined,symbol,bigint
          1种复杂类型: object
      -->
      <p>count: {{ count }}</p>
      <p>str: {{ str }}</p>
      <p>done: {{ done }}</p>
      <p>nl: {{ nl }}</p>
      <p>udf: {{ udf }}</p>
      <p>arr: {{ arr }}</p>
      <p>obj: {{ obj }}</p>
      <!-- <p>context: {{ context }}</p> -->

      <!-- v-html是用来解析标签 -->
      <!-- 要防止xss攻击 -->
      <p v-html="context"></p>
      <button v-on:click="count++">btn</button>

      <hr />

      <h3>属性绑定</h3>
      <!-- 如果在属性里面，需要使用v-bind指令 -->
      <div v-bind:title="title">hello vue!</div>
      <!-- v-bind指令可以缩写成: -->
      <img :src="url" alt="" />
      <!-- 当属性值为布尔值的时候，vue会自动地添加和移除该属性 -->
      <input type="text" :disabled="disabled" />
      <!-- <div v-bind="obj2">123</div> -->
      <div :class="obj2.className" :id="obj2.id">123</div>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      createApp({
        data() {
          return {
            count: 3,
            str: "hello vue!",
            done: false,
            nl: null,
            udf: undefined,
            arr: [1, 2, 3, 4],
            obj: {
              name: "xiaohua",
              age: 18,
            },
            context: "<i>前端小灰狼</i>",
            title: "标题",
            url: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
            disabled: false,
            obj2: {
              className: "box",
              id: "box2",
            },
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
